<template>
  <div class="success">
    <!-- bg-img -->
    <Bg></Bg>
    <!-- 成功后的内容 -->
    <!-- <van-form @submit="onSubmit"> -->
    <div class="form_box">
      <div class="form">
        <div class="title2">您已成功注册eCASC会员！</div>
        <div class="content">
          账户名和初始密码短信将在5分钟内发送到您手机中，请注意查收。
        </div>
        <div class="btn">
          <div
            class="btn_sub"
            @click.native="onDownload"
          >
            登录eCASC手机端
          </div>
        </div>
        <!-- <div class="btn">
          <van-button
            class="btn_sub"
            color="#2683FA"
            text="立即注册"
            size="large"
            @click="onDownload"
          >登录eCASC手机端</van-button>
        </div> -->
      </div>
    </div>
    <!-- </van-form> -->
    <div class="foot">
      <div>登录若出现问题，可联系客服热线</div>
      <div
        class="telephone"
        @click="telfn(4006782050)"
      >400-678-2050</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Bg from '@/components/Bg.vue'
// import { Button } from 'vant'
import deviceInfo from '@/utils/index' // 设备
import FastClick from 'fastclick-hvue'
FastClick.attach(document.body)
export default {
  name: 'Home',
  components: {
    Bg
    // VanButton: Button
  },
  data() {
    return {
      device: null
    }
  },
  created() {
    // console.log(Button)
    this.device = deviceInfo() // 获取设备类型
    console.log(this.device)
  },
  methods: {
    telfn(num) {
      window.location.href = 'tel://' + num
    },
    onDownload() {
      console.log('====')
      // this.$router.push({ name: 'Down' })
      if (this.device.iPhone) {
        location.href = 'https://apps.apple.com/cn/app/eCASC/id1474034891'
      } else if (this.device.android) {
        location.href =
          'https://sj.qq.com/myapp/detail.htm?apkName=com.ctripcorp.htkjtrip'
      }
      // loginRequest() // 测试代理是否成功
      // instance.post('/api/oss/customer/v1/registration/sendSms').then(res => { console.log(res) })
    }
  }
}
</script>
<style lang="scss" scoped>
.success {
  background-color: #f4f4f4;
  .form_box {
    width: 100%;
    height: 100%;
    .form {
      width: 702px;
      height: 426px;
      background: #ffffff;
      position: absolute;
      z-index: 1999;
      left: 24px;
      top: 372px;
      border-radius: 10px;
      // background-color: #f4f4f4;
      .title2 {
        color: #2683fa;
        font-size: 32px;
        text-align: center;
        position: absolute;
        left: 175px;
        top: 52px;
        font-weight: 400;
        // font-family: 'Source Han Sans CN';
      }
      .content {
        // font-family: 'Source Han Sans CN';
        font-weight: 400;
        font-size: 30px;
        line-height: 64px;
        width: 622px;
        height: 104px;
        position: absolute;
        left: 66px;
        top: 132px;
        text-align: left;
        color: #333333;
      }
      .btn {
        width: 622px;
        height: 80px;
        position: absolute;
        left: 42px;
        top: 284px;
        .btn_sub {
          width: 622px;
          height: 80px;
          font-size: 30px;
          background: #2683fa;
          color: #ffffff;
          line-height: 80px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .foot {
    width: 360px;
    height: 78px;
    position: absolute;
    left: 190px;
    top: 960px;
    font-size: 24px;
    font-weight: 400;
    line-height: 50px;
    color: #999999;
    text-align: center;
  }
  .foot .telephone {
    color: #2683fa;
  }
}
</style>
